Soru & Cevap

Bir Sitede Navbarı Tüm Sayfalara Dahil Etmek

30.05.2020 - 11:13

Merhabalar, örneğin index sayfasında bulunan navbarı diğer sayfalara(info,blog,contact.html) nasıl kodları copy paste yapmadan otomatik oluşmasını sağlarım ?

270 Görüntülenme

4 Cevap

Sitedeki sorulara cevap verebilmek için giriş yapın ya da üye olun.

Profile picture for user simsek
simsek
03.06.2020 - 09:16

Sana şu şekilde söyleyeyim. Hiçbir framework e geçmene gerek yok. Aşağıdaki kodu sayfana ekle. Ekleyeceğil elementi örn: navbar <div mtnsmsk-ekle="navbar.html"></div> Olarak Ekleyebilirsin. 
Sayfanın Sonuna Bu Kodu Ekle!
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("mtnsmsk-ekle");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Dosya Bulunamadı!.";}
          elmnt.removeAttribute("mtnsmsk-ekle");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
</script>

Profile picture for user simsek
simsek
03.06.2020 - 09:16

Sana şu şekilde söyleyeyim. Hiçbir framework e geçmene gerek yok. Aşağıdaki kodu sayfana ekle. Ekleyeceğil elementi örn: navbar <div mtnsmsk-ekle="navbar.html"></div> Olarak Ekleyebilirsin. 
Sayfanın Sonuna Bu Kodu Ekle!
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("mtnsmsk-ekle");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Dosya Bulunamadı!.";}
          elmnt.removeAttribute("mtnsmsk-ekle");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
</script>

Profile picture for user simsek
simsek
03.06.2020 - 09:14

Sana şu şekilde söyleyeyim. Hiçbir framework e geçmene gerek yok. Aşağıdaki kodu sayfana ekle. Ekleyeceğil elementi örn: navbar <div mtnsmsk-ekle="navbar.html"></div> Olarak Ekleyebilirsin. 
Sayfanın Sonuna Bu Kodu Ekle!
<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("mtnsmsk-ekle");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Dosya Bulunamadı!.";}
          elmnt.removeAttribute("mtnsmsk-ekle");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}
</script>

Profile picture for user
Konuk (doğrulanmamış)
30.05.2020 - 11:27

Bunu core html ile yapamazsın bunun için bu  bağlantıdaki js dosyasını kullanarak yapa bilirsin ancak dosya sisteminde yine çalışmayacaktır. Çünkü cross koruma diye bir şeye takılıyor tam hakim değilim konuya. Yada en güzeli Angular öğren :D

Mertcan Dursun
30.05.2020 - 11:30
Hocam teşekkürler cevabınız için. Angular'a yakında geçeceğim. Bu sorun aklımı karıştırdı çok araştırdım bir türlü cevap bulamadım.